
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文字</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        canvas.width=800;
        canvas.height=800;
        var context=canvas.getContext("2d");
        context.font="bold 40px Arial";

        context.fillStyle="#058";
        context.fillText("人生若只如初见，何事秋风悲画扇",40,100);

        context.lineWidth=1;
        context.strokeStyle="#058";
        context.strokeText("人生若只如初见，何事秋风悲画扇",40,200);

        context.fillText("人生若只如初见，何事秋风悲画扇",40,300,500);
        context.strokeText("人生若只如初见，何事秋风悲画扇",40,400,400);
        var linearGrad=context.createLinearGradient(0,0,800,0);
        linearGrad.addColorStop(0.0,'red');
        linearGrad.addColorStop(0.25,'orange');
        linearGrad.addColorStop(0.50,'yellow');
        linearGrad.addColorStop(0.75,'green');
        linearGrad.addColorStop(1.0,'purple');
        context.fillStyle=linearGrad;
        context.fillText("人生若只如初见，何事秋风悲画扇",40,500);

        var backgroundImage=new Image();
        backgroundImage.src="bj_findPwd.jpg";
        backgroundImage.onload=function(){
            var pattern=context.createPattern(backgroundImage,"no-repeat");
            context.fillStyle=pattern;
            context.font="bold 40px Arial";
            context.fillText("人生若只如初见，何事秋风悲画扇,",40,650,400);
//            context.strokeText("人生若只如初见，何事秋风悲画扇123",40,650,400);

        }




    }
</script>
</body>
</html>